<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
    >

      <el-form-item label="排行数量" prop="pageSize">
        <el-select
          v-model="queryParams.pageSize"
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="dict in topList"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="pageList">
      <el-table-column label="序号" align="center" type="index" width="100" />
      <el-table-column
        label="用户qq号码"
        align="left"
        prop="id"
        width="150"
      />
      <el-table-column
        label="用户昵称"
        align="left"
        prop="buyerQQNickName"
        width="150"
           :show-overflow-tooltip="true"
      />
       <el-table-column
        label="店铺昵称"
        align="left"
        prop="aliasNickname"
        width="150"
           :show-overflow-tooltip="true"
      />
      <el-table-column
        label="总消费金额"
        align="right"
        prop="buyPriceAll"
        width="150"
      />
       <el-table-column label="vip等级" align="center" prop="vip" width="100" />
       <el-table-column label="转让总次数" align="center" prop="use_all_sum" width="150" />
       <el-table-column label="转让已用次数" align="center" prop="use_over_sum" width="150" />
       <el-table-column label="转让剩余次数" align="center" prop="use_last_sum" width="150" />
  
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            link
            type="primary"
            icon="Edit"
            @click="handleOpenSub(scope.row)"
            >查看消费明细</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹出框 -->
    <el-dialog
      :title="detailTitle"
      v-model="openSub"
      width="80%"
      append-to-body
    >
      <com-detail :title="detailTitle" :queryusername="queryusername" />
    </el-dialog>
  </div>
</template>

<script setup name="UserRanking">
import ComDetail from "./comDetail.vue";

import { listAllOrderCount } from "@/api/business/orderCount";

const { proxy } = getCurrentInstance();

const pageList = ref([]);
const loading = ref(true);

const showSearch = ref(true);

const total = ref(0);
const detailTitle = ref(""); // 详情标题栏
const queryusername = ref(""); // 查询用户名

const loadingSub = ref(false);
const pageListSub = ref([]);
const openSub = ref(false); // 查看购买详情
const dateRange = ref([]);
const topList = ref([
  { label: "前10名", value: 10 },
  { label: "前20名", value: 20 },
  { label: "前50名", value: 50 },
  { label: "前100名", value: 100 },
]);

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 20,
    queryUserName: undefined,
  },
});

const { queryParams } = toRefs(data);

/** 查询公告列表 */
function getList() {
  loading.value = true;
  listAllOrderCount(
    proxy.addDateRangeZL(queryParams.value, dateRange.value)
  ).then((response) => {
    pageList.value = response.data;

    loading.value = false;
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 查看购买详情 */
function handleOpenSub(row) {
  openSub.value = true;
  detailTitle.value = `用户${row.id}-${row.buyerQQNickName}-${row.aliasNickname}的购买详情`;
  queryusername.value = row.id;
}
getList();
</script>
<style lang="scss" scoped>
.color-blue {
  color: rgb(0, 119, 255);
  cursor: pointer;
}
.avatar-uploader {
  width: 200px;
  height: 300px;
  .avatar {
    width: 100%;
    height: 100%;
  }
}
.avatar-uploader :deep(.el-upload) {
  width: 100%;
  height: 100%;
  border: 1px dashed #dcdfe6;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader :deep(.el-upload:hover) {
  border-color: #409eff;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
